<template>
	<view class="signature-d">
		<titleName :name="name"></titleName>
		<!-- 画布区域 -->
		<view class="canvas-wrap">
			<canvas canvas-id="signatureCanvas" class="signature-canvas" disable-scroll="true"
				@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>
		</view>

		<!-- 操作按钮 -->
		<view class="button-group">
			<button @click="handleReset">重置</button>
			<button @click="handleSave">保存</button>
			<button @click="handlePreview">预览</button>
			<button @click="submit">提交</button>
		</view>

	</view>

</template>
<script>
	import TitleName from './titleName.vue'
	import uploadFile from '../request/uploadFile.js'
	export default {
		data() {
			return {
				ctx: null, // canvas 上下文
				points: [], // 存储绘制路径点
				canvasWidth: 0, // 画布宽度
				canvasHeight: 0, // 画布高度
				tempFilePath: "", // 临时文件路径
				name: "电子签名"
			};
		},
		emits: ['changeSignature'],
		components: {
			TitleName
		},
		mounted() {
			this.initCanvas();
		},
		methods: {
			// 初始化画布
			initCanvas() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".signature-canvas")
					.boundingClientRect((rect) => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						this.ctx = uni.createCanvasContext("signatureCanvas", this);
						this.ctx.lineWidth = 4; // 设置线条宽度
						this.ctx.lineCap = "round"; // 设置线条端点样式
						this.ctx.lineJoin = "round"; // 设置线条交点样式
					})
					.exec();
			},

			// 触摸开始
			handleTouchStart(e) {
				const startX = e.touches[0].x;
				const startY = e.touches[0].y;
				this.points.push({
					x: startX,
					y: startY
				});
				this.ctx.beginPath();
				this.ctx.moveTo(startX, startY);
			},
			submit() {
				if (!this.tempFilePath) {
					uni.showToast({
						title: "请签名并点击保存",
						icon: "none",
						duration: 2000
					})
					return
				}
				uploadFile({
					filePath: this.tempFilePath
				}).then((res) => {
					if (res.code == 0) {
						console.log(this.$emit);
						this.$emit('changeSignature', res.data.url)
						// uni.navigateTo({
						// 	url: `/homePageOther/undertaking/index?signatureimg=${res.data.url}`
						// })

					}
				})
				// this.tempFilePath
			},
			// 触摸移动
			handleTouchMove(e) {
				const moveX = e.touches[0].x;
				const moveY = e.touches[0].y;
				this.points.push({
					x: moveX,
					y: moveY
				});

				if (this.points.length >= 2) {
					const point1 = this.points[this.points.length - 2];
					const point2 = this.points[this.points.length - 1];
					this.ctx.moveTo(point1.x, point1.y);
					this.ctx.lineTo(point2.x, point2.y);
					this.ctx.stroke();
					this.ctx.draw(true);
				}
			},

			// 触摸结束
			handleTouchEnd() {
				// this.points = [];
			},

			// 重置画布
			handleReset() {
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
				this.ctx.draw(true);
				this.tempFilePath = "";
			},

			// 保存签名
			handleSave() {

				if (this.points.length === 0) {
					uni.showToast({
						title: "请先签名",
						icon: "none"
					});
					return;
				}

				uni.canvasToTempFilePath({
					canvasId: 'signatureCanvas',
					fileType: 'jpg',
					success: (res) => {
						this.tempFilePath = res.tempFilePath;
						uni.showToast({
							title: "保存成功",
							icon: "success"
						});


					},
					fail: (err) => {
						console.error("保存失败", err);
					},
				}, this);
			},

			// 预览签名
			handlePreview() {
				if (!this.tempFilePath) {
					uni.showToast({
						title: "请先保存签名",
						icon: "none"
					});
					return;
				}
				uni.previewImage({
					urls: [this.tempFilePath],
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.signature-d {
		width: 100vw;
		height: 100vh;


		.canvas-wrap {
			padding: 30upx;

			height: 50vh;
			width: 100vw;

			.signature-canvas {
				height: 100%;
				width: 100%;
				border: 1px dashed #ccc;
				border-radius: 20upx;
				background-color: #fff;

			}
		}


		.button-group {
			margin-top: 20upx;
			display: flex;
			justify-content: space-around;
			width: 100%;
		}

		button {
			flex: 1;
			margin: 0 20upx;
		}


	}
</style>